<template>
	<div class="HomeAuthorBox">
		<div class="AuthorBox_title">精选作家</div>
		<div class="AuthorBox_item" v-for="item in recommends">
			<router-link :to="item.img_href" :href="item.img_href">
				<img :src="item.img_path">
				<p>{{item.img_title}}</p>
			</router-link>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'HomeAuthorBox',
		data: function() {
			return {
				recommends: [{
						'img_title': '韩寒',
						'img_path': require('assets/img/author/hanhan.png'),
						'img_href': '/bookdetailpage/14'
					},
					{
						'img_title': '卡夫卡',
						'img_path': require('assets/img/author/kafuka.png'),
						'img_href': '/bookdetailpage/3'
					},
					{
						'img_title': '鲁迅',
						'img_path': require('assets/img/author/luxun.png'),
						'img_href': '/bookdetailpage/17'
					},
					{
						'img_title': '莫泊桑',
						'img_path': require('assets/img/author/mobosang.png'),
						'img_href': '/bookdetailpage/10'
					},
				]
			}
		},
	}
</script>

<style>
	a{
		text-decoration: none;
	}
	.HomeAuthorBox{
		margin-top: 2px;
		display: flex; 
		width: 100%;
		height: 170px;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-around;
		text-align: center;
		padding: 15px 0 30px;
		border-top: 8px solid #eee;
		border-bottom: 10px solid #eee;
	}
	.AuthorBox_item{
		margin-top: 4px;
	}
	.AuthorBox_item img{
		width: 70px;
		height: 70px;
	}
	.AuthorBox_item p{
		text-align: center;
		margin-top: 2px;
		color: rgb(60,60,60);
		font-size: 12px;
	}
	.AuthorBox_title{
		width: 100%;
		height: 30px;
		text-align: center;
		line-height: 30px;
		margin-top: -15px;
	}
</style>
